<template>
  <div class="row">
    <div class="col-12">
      <ul class="nav nav-tabs nav-bordered mb-3" role="tablist">
        <li class="nav-item">
          <a
            class="nav-link"
            id="detail-tab"
            data-bs-toggle="tab"
            href="#newComment"
            >新建留言</a
          >
        </li>
        <li class="nav-item">
          <a
            class="nav-link active"
            id="login-tab"
            data-bs-toggle="tab"
            href="#comments"
            >留言列表</a
          >
        </li>
      </ul>
      <div class="tab-content">
        <div class="tab-pane fade show" id="newComment">
          <div class="card">
            <div class="card-body">
              <div class="col-1">
                <textarea
                  class="form-control"
                  rows="3"
                  v-model.trim="commentContent"
                ></textarea>
              </div>
              <button class="btn btn-primary" @click.stop="saveComment()">
                保存
              </button>
            </div>
            <table></table>
          </div>
        </div>
        <div class="tab-pane fade show active" id="comments">
          <table class="table table-sm">
            <thead>
              <tr>
                <th>留言内容</th>
                <th>留言人</th>
                <th>留言时间</th>
              </tr>
            </thead>
            <tr v-for="info in comments">
              <td>{{ info.comment }}</td>
              <td>{{ info.username }}</td>
              <td>{{ info.createTime }}</td>
            </tr>
          </table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { saveComment, searchComments } from "@/api/comment.js";

export default {
  props: {
    dataList: {
      type: Array,
    },
    orderType: {
      type: Number,
    },
    orderId: {
      type: Number,
    },
    commentCount: {
      type: Number,
    },
  },
  data() {
    return {
      commentContent: "",
      comments: [],
    };
  },
  mounted: function () {
    this.searchComments();
  },
  methods: {
    saveComment: function () {
      const params = {
        orderType: this.orderType,
        orderId: this.orderId,
        content: this.commentContent,
      };
      saveComment(params, (v) => {
        this.commonShowMessage(v);
        if (v.status === "OK") {
          //刷新评论
          this.searchComments();
        }
      });
    },
    searchComments: function () {
      const params = {
        orderType: this.orderType,
        orderId: this.orderId,
      };
      searchComments(params, (v) => {
        this.comments = v.dataList;
        this.$emit("update:commentCount", this.comments.length);
      });
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("失败：" + jsonResult.errmsg, "danger");
      } else {
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
        //this.searchOrderDetail()
      }
    },
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
  },
};
</script>